<template>
	<a-spin :spinning="loading">
		<a-card :body-style="{paddingTop: '8px'}">
			<a-tabs @change="search" v-model="isHandle">
        <a-tab-pane :key="false" tab="待处理"></a-tab-pane>
				<a-tab-pane :key="undefined" tab="全部"></a-tab-pane>
				<a-tab-pane :key="true" tab="已处理"></a-tab-pane>
			</a-tabs>
			<a-row type="flex" :gutter="16">
				<a-col class="mb-16 flex items-center" :span="8">
					<span class="label">审核单号：</span>
					<a-input v-model="auditRecordId" :max-length="100" @keyup.enter="search" class="flex-1" placeholder="请输入审核单号"/>
				</a-col>
				<a-col class="mb-16 flex items-center" :span="8">
					<span class="label">审核事项：</span>
					<a-select allow-clear v-model="auditType" :max-length="50" @change="search" class="flex-1" placeholder="请选择审核事项">
						<a-select-option v-for="item in storeAuditTypeEnums" :key="item.value" :value="item.value">{{ item.name }}</a-select-option>
					</a-select>
				</a-col>
				<a-col :span="8">
					<a-button type="primary" @click="search">查询</a-button>
					<a-button class="mx-8" @click="reset">重置</a-button>
				</a-col>
				<a-col class="mb-16 flex items-center" :span="8">
					<span class="label">服务商名称：</span>
					<a-input v-model="vendorName" :max-length="50" @keyup.enter="search" class="flex-1" placeholder="请输入服务商名称"></a-input>
				</a-col>
				<a-col class="mb-16 flex items-center" :span="8">
					<span class="label">门店名称：</span>
					<a-input v-model="storeName" :max-length="50" @keyup.enter="search" class="flex-1" placeholder="请输入门店名称"></a-input>
				</a-col>
			</a-row>
			<a-table :scroll="{x: 1200}" :columns="columns" class="table-con" :data-source="data" :pagination="pagination">
				<template #id="id, data">
					<section>{{ id }}</section>
					<section>{{ $utils.getEnumName(storeAuditTypeEnums, data.auditType) }}</section>
				</template>
				<template #userInfo="val, data">
					<section class="mb-4">{{ data.vendorName }}</section>
					<section class="text-12">
						<span>{{ data.applicantUserName }}</span>
					</section>
				</template>
				<template #storeInfo="val, data">
					<section class="text-16 font-bold mb-4">{{ data.name }}</section>
					<section class="text-12">
						<span>{{ data.contactName }}</span>
						<a-divider type="vertical"/>
						<span>{{ data.telephone }}</span>
					</section>
				</template>
				<template #auditRemark="auditRemark">
					<a-tooltip :title="auditRemark">
						<section class="overflow">{{ auditRemark }}</section>
					</a-tooltip>
				</template>
				<section slot="status" slot-scope="val, data">
					<section v-if="!$utils.getEnumName(auditStatusEnums, data.status)">待处理</section>
					<section v-else>
						<section class="mb-4">已处理</section>
						<a-button type="primary" size="small" ghost v-if="data.status === 1">已同意</a-button>
						<a-tooltip :title="data.auditRefusedReason">
							<a-button type="danger" size="small" ghost v-if="data.status === 2">
								<span>已拒绝</span>
							</a-button>
						</a-tooltip>
<!--						{{ $utils.getEnumName(auditStatusEnums, data.status) || '待处理' }}-->
					</section>
				</section>
				<template #action="val, data">
					<a v-if="$permissionJudge('StoreAuditHandle')" :class="{disabled: data.status !== 0}" href="javascript:;" @click="handleAudit(data)">快速处理</a>
          <a v-if="data.status !== 0" href="javascript:;" @click="handlePreview(data)">门店详情</a>
        </template>
			</a-table>
			<a-modal
				:title="isPreview ? '门店详情' : `快速处理-${$utils.getEnumName(storeAuditTypeEnums, currData.auditType)}`"
				width="1060px"
				:dialog-style="{top: '30px'}"
				:body-style="{padding: '12px 24px'}"
				v-model="showHandleModal"
			>
				<a-spin :spinning="detailsLoading">
					<a-tabs v-if="currData.auditType === 2 && !isPreview" style="margin-top: -12px;" v-model="tab">
						<a-tab-pane key="storeInfo" tab="申请修改门店信息"></a-tab-pane>
						<a-tab-pane key="beforeInfo" tab="修改前门店信息"></a-tab-pane>
					</a-tabs>
					<section style="padding-right: 8px; height: calc(100vh - 248px); overflow: auto;">
						<StoreInfo v-if="tab === 'storeInfo'" :store-data="currData.recordInfo"/>
						<StoreInfo v-if="currData.auditType === 2 && tab === 'beforeInfo' && !isPreview" :store-data="currData.beforeRecordInfo"/>
					</section>
				</a-spin>
				<template #footer>
          <template v-if="isPreview">
            <a-button type="primary" @click="showHandleModal = false">好的</a-button>
          </template>
          <template v-else>
            <a-button type="primary" @click="confirm">同意</a-button>
            <a-button type="danger" ghost @click="showRefuseModal = true">拒绝</a-button>
            <a-button @click="showHandleModal = false">取消</a-button>
          </template>
				</template>
			</a-modal>
			<a-modal
				title="填写审批不通过理由"
				v-model="showRefuseModal"
				width="666px"
				:confirm-loading="confirmLoading"
				@ok="confirmRefuse"
			>
				<a-form>
					<a-form-item required label="审核不通过理由">
						<a-textarea :rows="4" :max-length="500" v-model="auditRefusedReason" placeholder="请输入审核不通过理由"/>
					</a-form-item>
				</a-form>
			</a-modal>
		</a-card>
	</a-spin>
</template>

<script>
import {
  getAuditSotreList,
  getSotreDetail,
  updateSotre
} from '@/api/vendor'
import {tableMixins} from '@/utils/mixins'
import StoreInfo from './StoreInfo'
export default {
  name: 'CarAudit',
	mixins: [tableMixins],
  props: {
    tabKey: {
      type: String,
      required: true
    }
  },
	components: {StoreInfo},
  data() {
    return {
      isExpand: false,
			loading: false,
      isHandle: false,
      isPreview: false,
      detailsLoading: false,
      confirmLoading: false,
      showHandleModal: false,
      showRefuseModal: false,
      tab: 'storeInfo',
      vendorName: '',
      storeName: '',
      auditType: undefined,
      auditRecordId: '',
      auditRefusedReason: '',
      currData: {},
			columns: [
        {
          title: '审核单号',
          dataIndex: 'id',
					width: 160,
          align: 'center',
          scopedSlots: { customRender: 'id' }
        },
        {
          title: '申请人',
          width: 120,
          dataIndex: 'userInfo',
          align: 'center',
          scopedSlots: { customRender: 'userInfo' }
        },
        {
          title: '门店信息',
          dataIndex: 'storeInfo',
          align: 'center',
          width: 200,
          scopedSlots: { customRender: 'storeInfo' }
        },
        {
          title: '服务商备注',
          dataIndex: 'auditRemark',
          align: 'center',
          width: 300,
					ellipsis: true,
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '申请时间',
          width: 160,
          dataIndex: 'createTime',
          align: 'center',
        },
        {
          title: '状态',
          dataIndex: 'status',
          width: 160,
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          dataIndex: 'action',
          width: 80,
					fixed: 'right',
          align: 'center',
          scopedSlots: { customRender: 'action' }
        },
      ],
			data: [],
      transmissionTypeEnums: [],
      auditStatusEnums: [],
      storeAuditTypeEnums: []
    }
  },
	watch: {
    showHandleModal(val) {
      if (!val) {
        this.isPreview = false
      }
    },
    showRefuseModal(val) {
      if (!val) {
        this.auditRefusedReason = ''
			}
		}
	},
  async created() {
    this.transmissionTypeEnums = await this.$utils.getDictList('TransmissionType')
		this.auditStatusEnums = await this.$utils.getDictList('AuditStatus')
    this.storeAuditTypeEnums = await this.$utils.getDictList('StoreAuditType')
    this.getData()
  },
  methods: {
    getData() { // 获取列表
      this.loading = true
      getAuditSotreList({
        pageNo: this.pageNum,
        pageSize: this.rowsNum,
        vendorName: this.vendorName.trim(),
        storeName: this.storeName.trim(),
				isHandle: this.isHandle,
        auditType: this.auditType,
        auditRecordId: this.auditRecordId.trim()
      }).then((res) => {
        this.data = res.items
        this.total = res.rowCount
      }).finally(() => {
        this.loading = false
      })
    },
    confirm() {
      this.confirmLoading = true
      updateSotre({
        id: this.currData.id,
        status: 1,
        auditRefusedReason: ''
      }).then(() => {
        this.$message.success('审批成功！')
        this.showHandleModal = false
        this.getData()
      }).finally(() => this.confirmLoading = false)
		},
    confirmRefuse() {
      const auditRefusedReason = this.auditRefusedReason.trim()
			if (!auditRefusedReason) return this.$message.warning('请输入审核不通过理由')
			this.confirmLoading = true
      updateSotre({
				id: this.currData.id,
        status: 2,
        auditRefusedReason
			}).then(() => {
			  this.$message.success('审批成功！')
        this.showRefuseModal = false
        this.showHandleModal = false
				this.getData()
			}).finally(() => this.confirmLoading = false)
		},
    handleAudit(record) {
      if (record.status !== 0) return
      this.detailsLoading = true
			this.showHandleModal = true
			this.currData = {...record}
			getSotreDetail({id: record.id}).then(data => {
			  this.currData = {
			    ...record,
					...data
				}
      }).finally(() =>this.detailsLoading = false)
		},
    handlePreview(record) {
      this.isPreview = true
      this.detailsLoading = true
      this.showHandleModal = true
      this.currData = {...record}
      getSotreDetail({id: record.id}).then(data => {
        this.currData = {
          ...record,
          ...data
        }
      }).finally(() =>this.detailsLoading = false)
    },
    search() { // 搜索
      this.pageNum = 1
      this.getData()
    },

    reset() { // 重置
      this.isHandle = undefined
      this.vendorName = ''
			this.storeName = ''
			this.auditType = undefined
			this.auditRecordId = ''
      this.search()
    },
  }
}
</script>

<style scoped lang="less">
	.label {
		width: 86px;
		text-align: right
	}
	.ss-img {
		border: 1px solid #eee;
	}

	.ss-pics-box {
		min-height: 350px
	}
</style>
